<template>
  <div>
    <van-nav-bar title="档案" left-text="返回" left-arrow @click="onClickLeft" />
    <div class="editor">
      <p class="editor-title">*以下为必填项</p>
      <div class="editor-item">
        <div class="editor-text">
          <div class="editor-text-left">关系</div>
          <div class="editor-text-right">
            <van-field
              v-model="fieldValue"
              is-link
              readonly
              placeholder="选择城市"
              @click="showPicker = true"
              style="width: 100px; height: 35px"
            />
            <van-popup v-model:show="showPicker" round position="bottom">
              <van-picker :column="column" @cancel="showPicker = false" @confirm="onConfirm" />
            </van-popup>
          </div>
        </div>
        <div class="editor-text">
          <div class="editor-text-left">姓名</div>
          <div class="editor-text-right">
            <input type="text" style="width: 100px; height: 35px; border: none" />
          </div>
        </div>
        <div class="editor-text">
          <div class="editor-text-left">性别</div>
          <div class="editor-text-right"></div>
        </div>
        <div class="editor-text">
          <div class="editor-text-left">出生日期</div>
          <div class="editor-text-right">
            <van-field
              v-model="fieldValue"
              is-link
              readonly
              placeholder="选择城市"
              @click="showPicker = true"
              style="width: 100px; height: 35px"
            />
            <van-popup v-model:show="showPicker" round position="bottom">
              <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
            </van-popup>
          </div>
        </div>
      </div>

      <p class="editor-title">以下为选填项</p>
      <div class="editor-item">
        <div class="editor-text">
          <div class="editor-text-left">身高</div>
          <div class="editor-text-right">
            <van-field
              v-model="fieldValue"
              is-link
              readonly
              placeholder="选择城市"
              @click="showPicker = true"
              style="width: 100px; height: 35px"
            />
            <van-popup v-model:show="showPicker" round position="bottom">
              <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
            </van-popup>
          </div>
        </div>
        <div class="editor-text">
          <div class="editor-text-left">体重</div>
          <div class="editor-text-right">
            <input type="text" style="width: 100px; height: 35px; border: none" />
          </div>
        </div>
        <div class="editor-text">
          <div class="editor-text-left">性别</div>
          <div class="editor-text-right"></div>
        </div>
        <div class="editor-text">
          <div class="editor-text-left">腰围</div>
          <div class="editor-text-right">
            <van-field
              v-model="fieldValue"
              is-link
              readonly
              placeholder=" 请选择"
              @click="showPicker = true"
              style="width: 100px; height: 35px"
            />
            <van-popup v-model:show="showPicker" round position="bottom">
              <van-picker :column="column" @cancel="showPicker = false" @confirm="onConfirm" />
            </van-popup>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const onClickLeft = () => history.back()

const columns = [
  { text: '杭州', value: 'Hangzhou' },
  { text: '宁波', value: 'Ningbo' },
  { text: '温州', value: 'Wenzhou' },
  { text: '绍兴', value: 'Shaoxing' },
  { text: '湖州', value: 'Huzhou' }
]

const column = [
  { text: '父母', value: 'Parent' },
  { text: '子女', value: 'Sons and daughters' },
  { text: '爱人', value: 'Lover' },
  { text: '其他', value: 'Other' }
]
const fieldValue = ref('')
const showPicker = ref(false)

const onConfirm = ({ selectedOptions }) => {
  showPicker.value = false
  fieldValue.value = selectedOptions[0].text
}
</script>

<style lang="scss" scoped>
.editor {
  height: 100%;
  width: 100%;
  background-color: #f1f1f1;

  .editor-title {
    height: 40px;
    width: 100%;
    line-height: 40px;
    padding: 0 10px;
    font-size: 14px;
    margin-top: 5px;
  }
  .editor-item {
    height: 100%;
    width: 100%;
    background-color: #fff;
  }
  .editor-text {
    height: 40px;
    width: 100%;
    //background-color: blue;
    line-height: 40px;
    padding-left: 10px;
    border-bottom: 1px solid #f1f1f1;
    margin-top: 1px;
    .editor-text-left {
      float: left;
    }
    .editor-text-right {
      float: right;
    }
  }
}
</style>
